<template>
    <div class="page">
      <div class="top_img">
        <img style="width: 250px;height: 40px;" src="https://beihai-food.oss-cn-beijing.aliyuncs.com/04.png">
        <div class="f14"  style="font-size: 14px; color: #fff;margin-top: 8px;">
          每周二00:00至周五12:00开放
        </div>
      </div>
      <div class="content">
        <calendar :weekIndex="weekIndex" ref="calendar" @cutWeek="cutWeek"></calendar>
        <div class="flex_between" style="display: flex;justify-content: space-between;padding: 0 15px;">
          <div class="flex_align_conter" style="display: flex;justify-content: space-between">
            <button class="login-btn block bg-green-plain round">按日复制</button>
            <button class="login-btn block bg-green-plain round" 
              style="margin-left: 10px;">按周复制</button>
          </div>
          <button class="login-btn block bg-green-plain round">智能推荐</button>
        </div>
        <div class="tabs" v-if="tabsList.length > 0" style="">
          <!-- <u-tabs :activeStyle="{ 'color': '#0EB275' }" :itemStyle="{'height': '40px' }" lineColor="#0EB275"
            lineWidth="14" :list="tabsList" @click="tabsClick" :current="tabsCurrent"></u-tabs> -->
            <tabs
             style="width: 100%;"
                :tabsList="tabsList"
                :tabsCurrent="tabsCurrent"
                @tabsClick="tabsClick"
                />
        </div>
        <div class="flex meal_main">
          <div class="tabsSide h100">
            <div class="t" v-for="(item,index) in tabsSide" @click="tabsSideCilck(index,item)" style="">
              <div :class="{'t_active':index == tabsSideIndex}">
                {{item}}
              </div>
            </div>
          </div>
          <div class="flex1">
            <div class="right_side">
                <!-- {{ (tabsSide[tabsSideIndex] == '套餐' ? ingredientList : cuisineList) }} -->
                    
                    <!-- <setMealReservation v-for="item in (tabsSide[tabsSideIndex] == '套餐' ? ingredientList.filter(el=>el.type == tabsCurrent) : cuisineList.filter(el=>el.type == tabsCurrent))" :item="item">
                    </setMealReservation> -->
                    <setMealReservation v-for="item in (tabsSide[tabsSideIndex] == '套餐' ? ingredientList:cuisineList)" :item="item">
                    </setMealReservation>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { listData } from "@/api/system/dict/data"
import calendar from './calendar.vue'
import tabs from './tabs.vue'
import setMealReservation from './setMealReservation.vue'

// import { getList as getlists } from '@/api/combo'
import { getListWechart } from '@/api/combo'
import { getListDishWechart} from '@/api/cuisine'

  import { getfoodSetMealAPI, getfoodDateTypeAPI, getComboListAPI, getDishListAPI } from '@/api/indexs.js'
//   import { getRangeCopyAPI } from "@/subpackages/user/api/index.js"
  
  export default {
    name: 'MealSelection',
    components: {
        calendar,
        tabs,
        setMealReservation
    },
    data() {
      return {
        foodDateType: [],
        weekObj: {},
        shoppingData: [],
        weekIndex: 0,
        weekDatesOBJ:{},
        tabsSide: ['套餐', '菜品'],
        tabsSideIndex: 0,
        tabsCurrent: 1,
        packageList: [],
        tabsList: [],
        ingredientList: [],
          cuisineList: [],
          weyDate:""
      }
    },
    computed: {
      
    },
    created() {
        this.dictData();
        this.zzwdata();
        this.caip();
    },
    methods: {
        generateNextWeekDates() {
            const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
            const today = new Date()
            const nextWeekStart = new Date(today)
            
            // 计算下周一的日期
            const daysToNextMonday = (8 - today.getDay()) % 7
            nextWeekStart.setDate(today.getDate() + daysToNextMonday)
            
            // 生成下周7天的数据
            const dates = []
            for (let i = 0; i < 7; i++) {
            const date = new Date(nextWeekStart)
            date.setDate(nextWeekStart.getDate() + i)
            
            dates.push({
                orderType: '0', // 默认未订
                date: `${date.getMonth() + 1}/${date.getDate()}`,
                fullDate: `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`,
                weekDay: weekDays[date.getDay()],
                dictDataList: null
            })
            }
            
            return dates
        },
        // 日期列表点击回调
        cutWeek(e) {
            console.log('日期列表点击回调', e, this.tabsSideIndex, this.weekIndex)
            this.weekIndex = e.index
            if (this.tabsSideIndex == 0) {
                // 点击的是套餐tab
                this.infredient()
            } else {
                // 点击的是菜品
                this.caip()
            }
        },
        tabsClick(e) {
           
            this.tabsCurrent = e
            console.log('点击早中晚惨', e,this.tabsCurrent)
            console.log('点击套餐和菜品', this.tabsSideIndex)
            if (this.tabsSideIndex == 0) {
                // 点击的是套餐tab
                this.infredient()
            } else {
                // 点击的是菜品
                this.caip()
            }

        },
        tabsSideCilck(index, item) {
            this.tabsSideIndex = index
            console.log('点击套餐或者菜品tab了', this.tabsSideIndex,)
            if (index == 0) {
                // 点击的是套餐tab
                this.infredient()
            } else {
                // 点击的是菜品
                this.caip()
            }

        },
    async infredient() {
        const date = this.generateNextWeekDates()[this.weekIndex].weekDay
        const weyDate = this.generateNextWeekDates()[this.weekIndex].fullDate
        this.weyDate=weyDate
        console.log('打印下周日期数据', date, weyDate, this.tabsCurrent)
        const data = await getListWechart({ date: date, weyDate: weyDate,type:this.tabsCurrent})
        this.ingredientList = data.data
        
        console.log('打印套餐或下拉列表数据-------',this.ingredientList)
    },
        async caip() {
            const date = this.generateNextWeekDates()[this.weekIndex].weekDay
            const weyDate = this.generateNextWeekDates()[this.weekIndex].fullDate 
            this.weyDate=weyDate
            const res = await getListDishWechart({ date: date, weyDate: this.weyDate,type:this.tabsCurrent}) 
            this.cuisineList = res.data
            console.log('打印菜品下拉列表数据', this.cuisineList)
        },
      async dictData() {
        const res = await listData({
          dictType: "food_type",
          pageSize: 99,
          pageNum: 1
        })
        this.tabsSide = res.rows.filter(el => el.status == 0).map(el => el.dictLabel)
        },
        async zzwdata() {
            const res = await listData({
            dictType: "food_eat_type",
            pageSize: 99,
            pageNum: 1
            })
            this.tabsCurrent = String(res.rows.filter(el => el.status == 0)[0].dictValue)
          this.tabsList = res.rows.filter(el => el.status == 0)
          console.log(this.tabsCurrent)
        this.infredient();
            
            console.log('打印tablist',this.tabsList)
        }
    }
  }
  </script>
  
  <style scoped>
  .page {
    position: relative;
    background: #F2F2F2;
    padding-bottom: 15px;
  }

  .bg-green-plain{
    background-color: #fff;
    color: #0EB275;
  }
  
  .top_img {
    display: flex;
    flex-direction: column;
    padding-top: 60px;
    align-items: center;
    width: 100%;
    height: 175px;
    background-image: url('https://beihai-food.oss-cn-beijing.aliyuncs.com/03.png');
    background-size: cover;
    background-repeat: no-repeat;
    font-size: 18px;
    font-weight: 500;
  }

  .round{
    border-radius: 8px;
  }
  
  .content {
    position: relative;
    top: -65px;
    /* padding: 20px 10px 0; */
    /* padding: ; */
  }
  
  .login-btn {
    width: 75px;
    height: 22px;
    font-size: 14px;
    padding: 0;
    border: none;
  }
  
  .tabs {
    /* position: relative; */
    /* left: -10px; */
    margin-top: 8px;
    /* width: 100vw; */
    background: #fff;
    z-index: 2;
  }
  
  .tabsSide {
    position: relative;
    left: -10px;
    background-color: #fff;
    width: 60px;
    height: calc(100vh - 458px);
  }
  
  .t {
    text-align: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
  }
  
  .t_active {
    position: relative;
    color: #0EB275;
    background-color: #E6F7F1;
  }
  
  .t_active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #0EB275;
    z-index: 9;
    width: 30px;
    height: 2px;
    border-radius: 0px 2px 2px 0px;
    background: #0EB275;
  }
  
  .meal_main {
    display: grid;
    grid-template-columns: auto 1fr;
    padding-left: 10px;
    height: calc(100vh - 537px);
  }
  
  .right_side {
    padding-top: 8px;
    padding-bottom: 60px;
    height: calc(100vh - 470px);
    overflow-y: auto;
  }
  
  .meal-item {
    margin-bottom: 15px;
    padding: 10px;
    background: #fff;
    border-radius: 4px;
  }
  
  .meal-info h3 {
    margin: 0 0 5px 0;
  }
  
  .meal-actions button {
    width: 25px;
    height: 25px;
    margin: 0 5px;
  }
  </style>